//  引入发送请求的方法
import { request } from "../../request/index.js";
import regeneratorRuntime from '../../lib/runtime/runtime';
Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 左侧的菜单数据
    leftMenuList:[],
    // 右侧的菜单商品
    rightContent:[],
    // 接口的返回数据
    Cates:[],
    // 被点击的左侧的菜单
    currentIndex:0,
    // 滚动条距离顶部的距离
    scrollTop:0

  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) { 
    // 0 web中的本地存储和 小程序中的本地存储的区别
    //   1 写代码的方式不一样了 
    //     web: localStorage.setItem("key","value") localStorage.getItem("key")
    // 小程序中: wx.setStorageSync("key", "value"); wx.getStorageSync("key");
    //   2:存的时候 有没有做类型转换
    //     web: 不管存入的是什么类型的数据，最终都会先调用以下 toString(),把数据变成了字符串 再存入进去
    //   小程序: 不存在 类型转换的这个操作 存什么类似的数据进去，获取的时候就是什么类型
    // 1 先判断一下本地存储中有没有旧的数据
    //   {time:Date.now(),data:[...]}
    // 2 没有旧数据 直接发送新请求 
    // 3 有旧的数据 同时 旧的数据也没有过期 就使用 本地存储中的旧数据即可
    
    // 获取本地储存中的数据
    const Cates = wx.getStorageSync("cates");
    // 如果不存在就发送请求
    if(!Cates){
      // 首次肯定是发送请求的
      this.getCates();
    }else{
      // 有旧的数据 定义过期时间   10s 改成五分钟
      if (Date.now() - Cates.time > 1000*10) {
        // 重新发送请求
        this.getCates();
      }else{
        //可以使用旧的数据
        this.Cates = Cates.data;
        let leftMenuList = this.Cates.map(v =>v.cat_name);
        let rightContent = this.Cates[0].children;
  
        this.setData({
          leftMenuList,
          rightContent
        })
      }
    }
  },
// 发送请求获取商品分类
  async getCates() {
    // request({
    //   url: "/categories",
    // }).then((res) => {
    //   this.Cates = res.data.message;
    //   // 把接口的数据存入本地的储存
    //   wx.setStorageSync('cates', {time:Date.now(),data:this.Cates});
    //   // 构造左侧菜单栏
    //   let leftMenuList = this.Cates.map(v =>v.cat_name);
    //   // 构造右侧内容
    //   let rightContent = this.Cates[0].children;

    //   this.setData({
    //     leftMenuList,
    //     rightContent
    //   })
    // });
    const res = await request({url:"/categories"})
      this.Cates = res;
      // 把接口的数据存入本地的储存
      wx.setStorageSync('cates', {time:Date.now(),data:this.Cates});
      // 构造左侧菜单栏
      let leftMenuList = this.Cates.map(v =>v.cat_name);
      // 构造右侧内容
      let rightContent = this.Cates[0].children;

      this.setData({
        leftMenuList,
        rightContent
      })
  },
  // 左侧菜单栏的点击事件
  handleItemTap(e){
    // 获取被点击标题身上的索引
    // 给data里面的currentIndex赋值
    //根据不同的索引渲染右侧的内容
    const {index} = e.currentTarget.dataset;
    let rightContent = this.Cates[index].children;
    this.setData({
      currentIndex : index ,
      rightContent,
      scrollTop:0
    })
  }


});
